<template>
    <div>
		<!-- 定向包列表 -->
        <div>
            <a-form layout="horizontal" :form="form" @submit="handleSubmit">
                <a-row >
                    <a-col :md="4" :sm="24" >
                        <a-space>
                            <a-button type="primary" @click="adddstion"><a-icon type="plus" />添加定向包</a-button>
                            <a-button>删除</a-button>
                        </a-space>
                    </a-col>
                    <a-col :md="4" :sm="24" >
                        <a-form-item
                        :labelCol="{span: 2}"
                        :wrapperCol="{span: 18, offset: 1}"
                        >
                            <a-range-picker 
                            style="width: 200px;display:inline-block;"
                            v-decorator="[
                            'create_time',
                            ]" placeholder="选择开始日期-结束日期"
                            @change="ondates"
                            />
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="24" >
                        <a-form-item
                        :labelCol="{span: 2}"
                        :wrapperCol="{span: 18, offset: 1}"
                        >
                        <a-input style="width:300px;" v-decorator="[
                            'name',
                            ]"
                        placeholder="请输入名称关键词" />
                        </a-form-item>
                    </a-col>
                    <a-col :md="4" :sm="24" >
                        <span style="float: right; margin-top: 3px;">
                            <a-button type="primary" @click="queryresult">查询</a-button>
                            <a-button @click="btncancel" style="margin-left: 8px">重置</a-button>
                        </span>
                    </a-col>
                </a-row>

                <div>
                    <a-checkbox :checked="checkAll" @change="onCheckAllChange">
                        全选
                    </a-checkbox>
                    <span style="float:right;">全部定向包<strong>{{datanum}}</strong>个</span>
                </div>
                
            </a-form>
            <!-- 新建(修改)定向包 -->
					<a-modal
					:title="[direcid !=''?'编辑定向包':'新建定向包']"
					:visible="dstion"
					:confirm-loading="confirmLoading"
					@ok="dstionOk"
					@cancel="dstionCancel"
					:width="900"
					>
						<div class="ad-group" style="position:relative;">
							<a-form :form="form2">
						<!-- <a-tabs default-active-key="1" @change="callback"> -->
							<!-- 新建定向 -->
							<!-- <a-tab-pane key="1" tab="新建定向"> -->
								<a-form-item  :labelCol="{span: 3}" :wrapperCol="{span: 200}">
									<span slot="label">
										定向包名称&nbsp;
									</span>
									<div class="form-row">
									<a-input style="width:300px;" v-decorator="[
									'name',
									{ rules: [{ required: true, message: '请输入定向包名称' }],initialValue: '' }
									]" placeholder="请输入定向包名称" />
									</div>
								</a-form-item>


								<a-form-item  :labelCol="{span: 3}" :wrapperCol="{span: 200}">
									<span slot="label">
										定向包描述&nbsp;
									</span>
									<div class="form-row">
										<a-textarea style="width:300px;" v-decorator="[
											'description',
											{ rules: [{ required: true, message: '请输入定向包描述' }],initialValue: '' }
											]"
											placeholder="请输入定向包描述"
											:auto-size="{ minRows: 3, maxRows: 5 }"
										/>
									</div>
								</a-form-item>

								<a-form-item :labelCol="{span: 3}" :wrapperCol="{span: 200}">
									<span slot="label">
										地域&nbsp;
										<a-tooltip title="What do you want others to call you?">
										<a-icon type="question-circle-o" />
										</a-tooltip>
									</span>
									<a-radio-group v-decorator="[
									'district',
									{ rules:[],initialValue: 'NONE'}
									]"
								@change="ondistrict" button-style="solid">
										<a-radio-button value="NONE">
											不限
										</a-radio-button>
										<a-radio-button value="CITY">
											省市
										</a-radio-button>
										<a-radio-button value="COUNTY">
											区县
										</a-radio-button>
										<!-- <a-radio-button value="BUSINESS_DISTRICT">
											商圈
										</a-radio-button> -->
									</a-radio-group>
								</a-form-item>

								<!-- 按省 -->
								<div style="width:500px;margin-left:100px;" :class="[district =='CITY' ? 'isblock' : 'isnone']">
										<div class="linkage">
											<a-table :row-selection="rowSelectiondatas" style="display:inline-block;" :customRow="customRow" :style="{width:pixel}" :scroll="{ x: 210, y: 300 }" :pagination="pages" :columns="columnscity" :dataSource="treeData">
												<a slot="name" slot-scope="text">
													{{text.name}}
												<span style="float:right;"><a-icon type="right" /></span>
												</a>
											</a-table>

											<div v-show="sontable" style="display:inline-block;">
												<a-table :row-selection="sonrowSelection" :rowKey="id" :customRow="customRow" style="display:inline-block;" :scroll="{ x: 210, y: 300 }" :pagination="pages" :columns="soncolumns" :dataSource="sontreeData">
													<a slot="name" slot-scope="text">{{ text }}</a>
												</a-table>
											</div>
										</div>
									<div>
										<a-radio-group v-decorator="[
									'location_type',
									{ rules:[],initialValue: 'NONE'}
									]" default-value="CURRENT" @change="onlocation">
											<a-radio value="CURRENT">
												正在该地区的用户
											</a-radio>
											<a-radio value="HOME">
												居住在该地区的用户
											</a-radio>
											<a-radio value="TRAVEL">
												到该地区旅行的用户
											</a-radio>
											<a-radio value="ALL">
												该地区内的所有用户
											</a-radio>
										</a-radio-group>
									</div>
								</div>
						<!-- 按市 -->
						<div style="width:800px;margin-left:100px;" :class="[district =='COUNTY' ? 'isblock' : 'isnone']">

							 <!-- <a-input-search placeholder="省市搜索不支持按拼音、拼音首字母" enter-button="搜索" @search="onSearchcity" /> -->
							<div class="byted-select-panel-moduler">
								<div class="byted-select-panel-moduler-header">
									<span class="byted-select-panel-moduler-header-title">省份</span>
								</div>
								<div class="listbox">
									<a-list item-layout="horizontal" :data-source="province" >
										<a-list-item slot="renderItem" slot-scope="item" style="cursor:pointer;" @click="onprovince(item.id)">
											{{item.name}}
											<span style="float:right;"><a-icon type="right" /></span>
										</a-list-item>
									</a-list>
								</div>
							</div>

							<a-divider type="vertical" />
							<div class="byted-select-panel-moduler" v-if="city.length > 0">
								<div class="byted-select-panel-moduler-header">
									<span class="byted-select-panel-moduler-header-title">城市</span>
								</div>
								<div class="listbox">
									<a-list item-layout="horizontal" :data-source="city">
										<a-list-item slot="renderItem" slot-scope="item" style="cursor:pointer;" @click="oncity(item.id)">
											{{item.name}}
											<span style="float:right;"><a-icon type="right" /></span>
										</a-list-item>
									</a-list>
								</div>
							</div>
							
							<!-- 区县全选 -->
							<a-divider type="vertical" />
							<div class="byted-select-panel-moduler" v-if="county.length > 0">
								<div class="byted-select-panel-moduler-header">
									<span class="byted-select-panel-moduler-header-title">县区</span>
								</div>
								<div class="listbox">
									<a-checkbox :checked="is_checkedcity" @change="onallchecked">全选</a-checkbox>
									<div v-for="(item,index) in county" :key="index" style="line-height:30px;">
										<a-checkbox :checked="item.is_checked" @click="oncountyoff(index,item.id)">
											{{item.name}}
										</a-checkbox>
									</div>
								</div>
							</div>
							
							<a-divider type="vertical" />
							<!-- 区县已选 -->
							<div class="byted-select-panel-moduler">
								<div class="byted-select-panel-moduler-header">
									<span class="byted-select-panel-moduler-header-title">已选</span>
								</div>
								<div class="listbox">
									<div v-for="(item,index) in countylist" :key="index" style="line-height:30px;">
										<span>
											{{item.name}}
											<a style="float:right;" @click="oncountydel(item.id)"><a-icon type="delete" /></a>
										</span>
									</div>
								</div>
							</div>

						<div>
								<a-radio-group v-decorator="[
							'location_type',
							{ rules:[],initialValue: 'NONE'}
							]" default-value="CURRENT" @change="onlocation">
									<a-radio value="CURRENT">
										正在该地区的用户
									</a-radio>
									<a-radio value="HOME">
										居住在该地区的用户
									</a-radio>
									<a-radio value="TRAVEL">
										到该地区旅行的用户
									</a-radio>
									<a-radio value="ALL">
										该地区内的所有用户
									</a-radio>
								</a-radio-group>
							</div>
						</div>

								<a-form-item  :labelCol="{span: 3}" :wrapperCol="{span: 200}">
									<span slot="label">
										性别&nbsp;
										<a-tooltip title="What do you want others to call you?">
										<a-icon type="question-circle-o" />
										</a-tooltip>
									</span>
									<a-radio-group v-decorator="[
									'gender',
									{ rules:[],initialValue: 'NONE'}
									]"
								@change="ongender" button-style="solid">
									
										<a-radio-button value="NONE">
											不限
										</a-radio-button>
										<a-radio-button value="GENDER_MALE">
											男
										</a-radio-button>
										<a-radio-button value="GENDER_FEMALE">
											女
										</a-radio-button>
									</a-radio-group>
								</a-form-item>

								<a-form-item  :labelCol="{span: 3}" :wrapperCol="{span: 200}">
									<span slot="label">
										年龄&nbsp;
										<a-tooltip title="What do you want others to call you?">
										<a-icon type="question-circle-o" />
										</a-tooltip>
									</span>

									<div class="label" id="label">
										<a-button @click="onlabel" :type="[agearr.length <=0 ?'primary' : '']" >不限</a-button>
										<a-button @click="label1" :type="label.label1 ? 'primary' : ''">18-23</a-button>
										<a-button @click="label2" :type="label.label2 ? 'primary' : ''">24-30</a-button>
										<a-button @click="label3" :type="label.label3 ? 'primary' : ''">31-40</a-button>
										<a-button @click="label4" :type="label.label4 ? 'primary' : ''">41-49</a-button>
										<a-button @click="label5" :type="label.label5 ? 'primary' : ''">50+</a-button>
									</div>
								</a-form-item>

								<a-form-item  :labelCol="{span: 3}" :wrapperCol="{span: 200}">
									<span slot="label">
										自定义人群&nbsp;
										<a-tooltip title="What do you want others to call you?">
										<a-icon type="question-circle-o" />
										</a-tooltip>
									</span>
									<a-radio-group v-decorator="[
									'retargetings',
									{ rules:[],initialValue: 'NONE'}
									]"
								@change="onretargeting" button-style="solid">
										<a-radio-button value="NONE">
											不限
										</a-radio-button>
										<a-radio-button value="RETARGETINGTAGS">
											自定义人群
										</a-radio-button>
									</a-radio-group>
								</a-form-item>
								<!-- 定向 -->
								<div :class="[retargeting == 'RETARGETINGTAGS' ? 'isblock' : 'isnone']">
										<a-form-item  :labelCol="{span: 3}" :wrapperCol="{span: 200}">
											<span slot="label">
												定向逻辑&nbsp;
												<a-tooltip title="What do you want others to call you?">
												<a-icon type="question-circle-o" />
												</a-tooltip>
											</span>
											<a-radio-group default-value="retargeting_tags_include" v-decorator="[
												'retargeting',
												{ rules:[],initialValue: 'retargeting_tags_include'}
												]"
											@change="onretargetingtags" button-style="solid">
												<a-radio-button value="retargeting_tags_include">
													定向
												</a-radio-button>
												<a-radio-button value="retargeting_tags_exclude">
													排除
												</a-radio-button>
											</a-radio-group>
										</a-form-item>
										
										<div class="mfont" :class="[retargeting_tags =='retargeting_tags_include' ?'isblock':'isnone']">
											<a-input-search
												style="width:500px;"
												placeholder="请输入人群包名称或ID"
												enter-button="搜索"
												size="large"
												@search="ondmp"
												/>
											<a-table :row-selection="rowSelection" style="width:500px;" :columns="columns" :data-source="tagslist">
												<a slot="name" slot-scope="text">{{ text }}</a>
											</a-table>
											
											<p><a-icon type="info-circle" />第三方人群运算受到限制，部分场景无法选择<a-tooltip title="第三方人群包限制如下
						1. 不支持排除第三方人群包；
						2. 不支持同时使用多个来源的第三方人群包">
											<a-icon type="question-circle-o" />
											</a-tooltip></p>
											<p style="color:#2F88FF;cursor:pointer">
												管理自定义人群包<a-icon type="form" />
											</p>
										</div>

										<div class="mfont" :class="[retargeting_tags =='retargeting_tags_exclude' ?'isblock':'isnone']">
											<a-input-search
											style="width:500px;"
												placeholder="请输入人群包名称或ID"
												enter-button="搜索"
												size="large"
												@search="ondmp"
												/>
											<a-table :row-selection="rowSelections" style="width:500px;" :columns="columns" :data-source="tagslist">
												<a slot="name" slot-scope="text">{{ text }}</a>
											</a-table>
											
											<p><a-icon type="info-circle" />第三方人群运算受到限制，部分场景无法选择<a-tooltip title="第三方人群包限制如下
							1. 不支持排除第三方人群包；
							2. 不支持同时使用多个来源的第三方人群包">
											<a-icon type="question-circle-o" />
											</a-tooltip></p>
											<p style="color:#2F88FF;cursor:pointer">
												管理自定义人群包<a-icon type="form" />
											</p>
										</div>
								</div>

								<a-form-item
									:label="$t('行为兴趣')"
									:labelCol="{span: 3}"
									:wrapperCol="{span: 200}"
									
								>
								<a-radio-group v-decorator="[
												'interest_action_mode',
												{ rules:[],initialValue: 'UNLIMITED'}
												]"
											@change="oninterest" button-style="solid">
									<a-radio-button value="UNLIMITED">
										不限
									</a-radio-button>
									<a-radio-button value="RECOMMEND">
										系统推荐<a-icon type="question-circle-o" />
									</a-radio-button>
									<a-radio-button value="CUSTOM">
										自定义
									</a-radio-button>
								</a-radio-group>
								</a-form-item>
								<!-- 行为兴趣 -->
						<div :class="[interest =='CUSTOM' ?'isblock':'isnone']">
							<p class="pfont" style="margin-left:100px;">选择有以下行为特征或兴趣特征的用户<span class="spanfont">了解详情</span></p>
							<!-- 行为 -->
							<a-form-item :labelCol="{span: 2}" :wrapperCol="{span: 200}">
								<span slot="label">
									行为&nbsp;
									<a-tooltip title="What do you want others to call you?">
									<a-icon type="question-circle-o" />
									</a-tooltip>
								</span>
								<div style="width:750px; display:inline-block;">
									<div>
										在
										<a-select placeholder="所有行为场景" style="width: 200px" v-decorator="[
										'action_scene',
										{ rules:[],initialValue: ''}
										]" @change="onscene">
											<a-select-option value="E-COMMERCE">
												电商互动行为
											</a-select-option>
											<a-select-option value="NEWS">
												资讯互动行为
											</a-select-option>
											<a-select-option value="APP">
												APP推广互动行为
											</a-select-option>
										</a-select>
										中，选择用户
										<a-select  style="width: 100px" v-decorator="[
										'action_days',
										{ rules:[],initialValue: action_days}
										]" @change="ondays">
											<a-select-option value="7">
												7天
											</a-select-option>
											<a-select-option value="15">
												15天
											</a-select-option>
											<a-select-option value="30">
												30天
											</a-select-option>
											<a-select-option value="60">
												60天
											</a-select-option>
											<a-select-option value="90">
												90天
											</a-select-option>
											<a-select-option value="180">
												180天
											</a-select-option>
											<a-select-option value="365">
												365天
											</a-select-option>
										</a-select>
										内发生的行为:
									</div>
									<div>
										
									<!-- <div class="certain-category-search-wrapper" style="width: 250px"> -->
										<!-- <a-auto-complete
										class="certain-category-search"
										dropdown-class-name="certain-category-search-dropdown"
										:dropdown-match-select-width="false"
										:dropdown-style="{ width: '400px' }"
										style="width: 100%"
										placeholder="请输入类目词或关键词"
										option-label-prop="value"
										@search="oncategoriesword"
										>
										<template slot="dataSource">
											<a-select-option v-for="(opt,index) in datakeyword" :key="index">
												<div style="display:inline-block;">
													{{opt.name}}
													<p class="certain-search-item-count" style="line-height: 22px;font-size: 14px;color: #999;">覆盖数{{opt.num}}</p>
												</div>
												<div style="float:right;display:inline-block;line-height:30px;">
													<span @click="addkeys(opt)">添加</span>
													<a style="margin-left:15px;">查关键词</a>
												</div>
											</a-select-option>
										</template>
										<a-input>
											<a-icon slot="suffix" type="search" class="certain-category-icon" />
										</a-input>
										</a-auto-complete> -->
									<!-- </div> -->
										<a-input-search placeholder="请输入类目词或关键词" style="width: 400px" @search="oncategoriesword" /><span class="spanfont"><a-icon type="check-square" style="margin-left:20px;" />批量添加</span>
										
										<a-tabs :defaultActiveKey="action_key" @change="onaction">
											<a-tab-pane key="action_categories" tab="类目词">
												<div class="content">
													
													<div class="text">
														<div @click="arr1()">
															<a-checkbox :checked="is_checked_1"><span>全选</span></a-checkbox>
														</div>
														<div v-for="(item,index) in categorieslist" :key="index">
															<div>
																<a-checkbox :checked="item.is_checked" @click="checked1(index,item.id)"><span @click="handleChange1(index)">{{item.name}}</span></a-checkbox>
																<span style="float:right;font-size:14px;line-height:30px;color:rgba(0, 0, 0, 0.65)"><a-icon type="right" /></span>
															</div>
														</div>
													</div>

													<div class="text" v-if="arr2.length >0">
														<div @click="arrs2()" v-if="arr2.length != 0">
															<a-checkbox :checked="is_checked_2"><span>全选</span></a-checkbox>
														</div>
														<div v-for="(item,index) in arr2" :key="index">
															<div>
																<a-checkbox :checked="item.is_checked" @click="checked2(index,item.id)"><span  @click="handleChange2(index)">{{item.name}}</span></a-checkbox>
																<span style="float:right;font-size:14px;line-height:30px;color:rgba(0, 0, 0, 0.65)"><a-icon type="right" /></span>
															</div>
														</div>
													</div>

													<div class="text" v-if="arr3.length >0">
														<div @click="arrs3()" v-if="arr3.length != 0">
															<a-checkbox :checked="is_checked_3"><span>全选</span></a-checkbox>
														</div>
														<div v-for="(item,index) in arr3" :key="index" >
															<div @click="handleChange3(index)">
																<a-checkbox :checked="item.is_checked" @click="checked3(index,item.id)"><span  @click="handleChange2(index)">{{item.name}}</span></a-checkbox>
															</div>
														</div>
													</div>

													<div class="content2">
														<div class="title">
															<h3>还可以添加行为：{{350 - titleArr.length}}个</h3>
															<p style="margin-bottom:0px;"><span>类目词：{{catewords.length}}</span><span style="margin-left:20px;">关键词：{{datakeyword.length}}</span></p>
															<div>
																<a-row>
																	<a-col :span="8" style="font-size:14px;color:#333;">
																		全部
																	</a-col>
																	<a-col :span="8" style="font-size:14px;color:#333;">
																		覆盖数
																	</a-col>
																	<a-col :span="8">
																		
																	</a-col>
																</a-row>
															</div>
														</div>
														<a-empty style="padding-top:20px;" v-if="titleArr.length <=0" />
														<div style="padding:10px;">
															<div v-for="(item,index) in titleArr" :key="index">
																<a-row style="padding:0;">
																	<a-col :span="8">
																		{{item.name}}
																	</a-col>
																	<a-col :span="8">
																		{{item.num}}
																	</a-col>
																	<a-col :span="8" >
																		<span style="font-size:16px;">
																			<a-space>
																				<a @click="querykeys(item.name)"><a-icon type="search" /></a>
																				<a @click="onwords(index)"><a-icon type="delete" /></a>
																			</a-space>
																		</span>
																	</a-col>
																</a-row>
															</div>
														</div>
													</div>
												</div>
											</a-tab-pane>
											<a-tab-pane key="action_words" tab="关键词">
												
												<div class="content">
													<div class="text" style="width:400px;">
														<div class="crumbs-tips" style="float:right;font-size:12px;text-align:right;">根据关键词推荐的相关词</div>
														<a-empty style="padding-top:20px;" v-if="keyswordlist.length <=0" />
														<div v-for="(item,index) in keyswordlist" :key="index">
															 <a-col :span="8" style="font-size:14px;padding:5px;">
																{{item.name}}
															</a-col>
															<a-col :span="8" style="font-size:14px;padding:5px;">
																{{item.num}}
															</a-col>
															<a-col :span="8" style="font-size:14px;padding:5px;">
																<a @click="addkeys(item)">添加</a>
																<a style="margin-left:20px;" @click="querykeys(item.name)">查关键词</a>
															</a-col>
														</div>
													</div>

													<div class="content2">
														<div class="title">
															<h3>还可以添加行为：{{350 - titleArr.length}}个</h3>
															<p style="margin-bottom:0px;"><span>类目词：{{catewords.length}}</span><span style="margin-left:20px;">关键词：{{datakeyword.length}}</span></p>
															<div>
																<a-row>
																	<a-col :span="8" style="font-size:14px;color:#333;">
																		全部
																	</a-col>
																	<a-col :span="8" style="font-size:14px;color:#333;">
																		覆盖数
																	</a-col>
																	<a-col :span="8">
																		
																	</a-col>
																</a-row>
															</div>
														</div>

														<a-empty style="padding-top:20px;" v-if="titleArr.length <=0" />
														<div style="padding:10px;">
															<div v-for="(item,index) in titleArr" :key="index">
																<a-row style="padding:0;">
																	<a-col :span="8">
																		{{item.name}}
																	</a-col>
																	<a-col :span="8">
																		{{item.num}}
																	</a-col>
																	<a-col :span="8" >
																		<span style="font-size:16px;">
																			<a-space>
																				<a @click="querykeys(item.name)"><a-icon type="search" /></a>
																				<a @click="onwords(index)"><a-icon type="delete" /></a>
																			</a-space>
																		</span>
																	</a-col>
																</a-row>
															</div>
														</div>

													</div>
												</div>
											</a-tab-pane>
										</a-tabs>

									</div>
								</div>
							</a-form-item>
							
							<!-- 兴趣 -->
							<a-form-item  :labelCol="{span: 2}" :wrapperCol="{span: 200}">
								<span slot="label">
									兴趣&nbsp;
									<a-tooltip title="What do you want others to call you?">
									<a-icon type="question-circle-o" />
									</a-tooltip>
								</span>
								<div style="width:750px; display:inline-block;">
									<div>
										
									<!-- <div class="certain-category-search-wrapper" style="width: 250px"> -->
										<!-- <a-auto-complete
										class="certain-category-search"
										dropdown-class-name="certain-category-search-dropdown"
										:dropdown-match-select-width="false"
										:dropdown-style="{ width: '400px' }"
										style="width: 100%"
										placeholder="请输入类目词或关键词"
										option-label-prop="value"
										@search="oncategoriesword"
										>
										<template slot="dataSource">
											<a-select-option v-for="(opt,index) in datakeyword" :key="index">
												<div style="display:inline-block;">
													{{opt.name}}
													<p class="certain-search-item-count" style="line-height: 22px;font-size: 14px;color: #999;">覆盖数{{opt.num}}</p>
												</div>
												<div style="float:right;display:inline-block;line-height:30px;">
													<span @click="addkeys(opt)">添加</span>
													<a style="margin-left:15px;">查关键词</a>
												</div>
											</a-select-option>
										</template>
										<a-input>
											<a-icon slot="suffix" type="search" class="certain-category-icon" />
										</a-input>
										</a-auto-complete> -->
									<!-- </div> -->
										<a-input-search placeholder="请输入类目词或关键词" style="width: 400px" @search="oninterestword" /><span class="spanfont"><a-icon type="check-square" style="margin-left:20px;" />批量添加</span>
										
										<a-tabs :defaultActiveKey="actionkey" @change="oninterestkey">
											<a-tab-pane key="interest_categories" tab="类目词">
												<div class="content">
													
													<div class="text">
														<div @click="onarr1()">
															<a-checkbox :checked="is_checked_s1"><span>全选</span></a-checkbox>
														</div>
														<div v-for="(item,index) in interestlist" :key="index">
															<div>
																<a-checkbox :checked="item.is_checked" @click="checkeds1(index,item.id)"><span @click="handleChanges1(index)">{{item.name}}</span></a-checkbox>
																<span style="float:right;font-size:14px;line-height:30px;color:rgba(0, 0, 0, 0.65)"><a-icon type="right" /></span>
															</div>
														</div>
													</div>

													<div class="text" v-if="array2.length >0">
														<div @click="onarr2()" v-if="array2.length != 0">
															<a-checkbox :checked="is_checked_s2"><span>全选</span></a-checkbox>
														</div>
														<div v-for="(item,index) in array2" :key="index">
															<div>
																<a-checkbox :checked="item.is_checked" @click="checkeds2(index,item.id)"><span  @click="handleChanges2(index)">{{item.name}}</span></a-checkbox>
																<span style="float:right;font-size:14px;line-height:30px;color:rgba(0, 0, 0, 0.65)"><a-icon type="right" /></span>
															</div>
														</div>
													</div>

													<div class="text" v-if="array3.length >0">
														<div @click="onarr3()" v-if="array3.length != 0">
															<a-checkbox :checked="is_checked_s3"><span>全选</span></a-checkbox>
														</div>
														<div v-for="(item,index) in array3" :key="index" >
															<div @click="handleChanges3(index)">
																<a-checkbox :checked="item.is_checked" @click="checkeds3(index,item.id)"><span  @click="handleChanges2(index)">{{item.name}}</span></a-checkbox>
															</div>
														</div>
													</div>

													<div class="content2">
														<div class="title">
															<h3>还可以添加行为：{{350 - titleArray.length}}个</h3>
															<p style="margin-bottom:0px;"><span>类目词：{{titleArray.length}}</span><span style="margin-left:20px;">关键词：0</span></p>
															<div>
																<a-row>
																	<a-col :span="8" style="font-size:14px;color:#333;">
																		全部
																	</a-col>
																	<a-col :span="8" style="font-size:14px;color:#333;">
																		覆盖数
																	</a-col>
																	<a-col :span="8">
																		
																	</a-col>
																</a-row>
															</div>
														</div>
														<a-empty style="padding-top:20px;" v-if="titleArray.length <=0" />
														<div style="padding:10px;">
															<div v-for="(item,index) in titleArray" :key="index">
																<a-row style="padding:0;">
																	<a-col :span="8">
																		{{item.name}}
																	</a-col>
																	<a-col :span="8">
																		{{item.num}}
																	</a-col>
																	<a-col :span="8" >
																		<span style="font-size:16px;">
																			<a-space>
																				<a @click="querykeywork(item.name)"><a-icon type="search" /></a>
																				<a @click="onkeywords(index)"><a-icon type="delete" /></a>
																			</a-space>
																		</span>
																	</a-col>
																</a-row>
															</div>
														</div>
													</div>
												</div>
											</a-tab-pane>
											<a-tab-pane key="interest_words" tab="关键词">
												
												<div class="content">
													<div class="text" style="width:400px;">
														<div class="crumbs-tips" style="float:right;font-size:12px;text-align:right;">根据关键词推荐的相关词</div>
														<a-empty style="padding-top:20px;" v-if="interestkeyword.length <=0" />
														<div v-for="(item,index) in interestkeyword" :key="index">
															 <a-col :span="8" style="font-size:14px;padding:5px;">
																{{item.name}}
															</a-col>
															<a-col :span="8" style="font-size:14px;padding:5px;">
																{{item.num}}
															</a-col>
															<a-col :span="8" style="font-size:14px;padding:5px;">
																<a @click="addkeys(item)">添加</a>
																<a style="margin-left:20px;" @click="querykeywork(item.name)">查关键词</a>
															</a-col>
														</div>
													</div>

													<div class="content2">
														<div class="title">
															<h3>还可以添加行为：{{350 - titleArray.length}}个</h3>
															<p style="margin-bottom:0px;"><span>类目词：{{titleArray.length}}</span><span style="margin-left:20px;">关键词：0</span></p>
															<div>
																<a-row>
																	<a-col :span="8" style="font-size:14px;color:#333;">
																		全部
																	</a-col>
																	<a-col :span="8" style="font-size:14px;color:#333;">
																		覆盖数
																	</a-col>
																	<a-col :span="8">
																		
																	</a-col>
																</a-row>
															</div>
														</div>

														<a-empty style="padding-top:20px;" v-if="titleArray.length <=0" />
														<div style="padding:10px;">
															<div v-for="(item,index) in titleArray" :key="index">
																<a-row style="padding:0;">
																	<a-col :span="8">
																		{{item.name}}
																	</a-col>
																	<a-col :span="8">
																		{{item.num}}
																	</a-col>
																	<a-col :span="8" >
																		<span style="font-size:16px;">
																			<a-space>
																				<a @click="querykeywork(item.name)"><a-icon type="search" /></a>
																				<a @click="onkeywords(index)"><a-icon type="delete" /></a>
																			</a-space>
																		</span>
																	</a-col>
																</a-row>
															</div>
														</div>

													</div>
												</div>
											</a-tab-pane>
										</a-tabs>

									</div>
								</div>
							</a-form-item>
						</div>

								<a-form-item :label="$t('抖音达人')" :labelCol="{span: 3}" :wrapperCol="{span: 200}" >
									<a-radio-group v-decorator="[
										'aa',
												{ rules:[],initialValue: 'NONE'}
												]"
											@change="ontiktok" button-style="solid">
										<a-radio-button value="NONE">
											不限
										</a-radio-button>
										<a-radio-button value="RECOMMEND">
											自定义
										</a-radio-button>
									</a-radio-group>
								</a-form-item>

								<div :class="[tiktok =='RECOMMEND' ? 'isblock':'isnone']" style="margin-left:100px;">
									<p class="pfont">通过选择抖音达人或达人所在分类，定向对这些内容感兴趣的用户<span class="spanfont">了解详情</span></p>
									<div>
										定向与以下达人产生
										<a-select  style="width: 200px"  v-decorator="[
										'aweme_fan_behaviors',
												{ rules:[],initialValue: 'FOLLOWED_USER'}
												]" @change="onbehaviors">
											<a-select-option value="FOLLOWED_USER">
												已关注用户
											</a-select-option>
											<a-select-option value="COMMENTED_USER">
												视频互动-已评论用户
											</a-select-option>
											<a-select-option value="LIKED_USER">
												视频互动-已点赞用户
											</a-select-option>
											<a-select-option value="SHARED_USER">
													视频互动-已分享用户
											</a-select-option>
										</a-select>
										互动的用户
									</div>

									<div>
								<p><a-input-search placeholder="支持搜索抖音达人、抖音昵称或抖音达人所在分类" style="width: 400px" @search="ontiktokkey" /></p>
								<a-table :row-selection="rowtiktoktalent" style="display:inline-block;" :scroll="{ x: 200, y: 300 }" :pagination="pages" :columns="talentcolumns" :data-source="tiktoktalent">
									<a slot="name" style="width:200px;" slot-scope="text">
										{{text.value}} 
										<p style="margin:0;line-height:20px;font-size:12px;">粉丝数量：{{text.fans_num_str}}</p>
										<a-icon type="right" v-if="text.son.length >0" style="float:right;" />
									</a>
								</a-table>
								<div style="display:inline-block;margin-left:15px;" v-if="sontiktoktalent.length >0">
									<a-table :row-selection="rowsontiktoktalent" style="display:inline-block;" :scroll="{ x: 200, y: 300 }" :pagination="pages" :columns="sontalentcolumns" :data-source="sontiktoktalent">
										<a slot="name" slot-scope="text">
											{{text.value}}
											<p style="margin:0;line-height:20px;font-size:12px;">粉丝数量：{{text.fans_num_str}}</p>
											<a-icon type="right" v-if="text.son.length >0" style="float:right;" />
										</a>
									</a-table>
								</div>

								<div style="display:inline-block;margin-left:15px;" v-if="threetiktoktalent.length >0">
									<a-table :row-selection="rowthreetiktoktalent" style="display:inline-block;" :scroll="{ x: 200, y: 300 }" :pagination="pages" :columns="threetalentcolumns" :data-source="threetiktoktalent">
										<a slot="name" slot-scope="text">
											{{text.value}}
											<p style="margin:0;line-height:20px;font-size:12px;">粉丝数量：{{text.fans_num_str}}</p>
											<a-icon type="right" v-if="text.son.length >0" style="float:right;" />
										</a>
									</a-table>
								</div>

							</div>

								</div>

								<a-form-item
									:label="$t('媒体定向')"
									:labelCol="{span: 3}"
									:wrapperCol="{span: 200}"
									
								>
									<a-radio-group v-decorator="[
									'superior_popularity_type',
												{ rules:[],initialValue: 'NONE'}
												]"
											@change="onsuperior" button-style="solid">
										<a-radio-button value="NONE">
											不限
										</a-radio-button>
										<a-radio-button value="GAME" :disabled="dis">
											游戏优质媒体
										</a-radio-button>
										<a-radio-button value="RECOMMEND">
											自定义
										</a-radio-button>
									</a-radio-group>
										<p class="mfont"><a-icon type="info-circle" />媒体包仅支持穿山甲、穿山甲-精选游戏广告位</p>
								</a-form-item>

									<!-- 媒体定向  -->
									<div  :class="[superior == 'RECOMMEND' ? 'isblock' : 'isnone']">
										<a-form-item  :labelCol="{span: 3}" :wrapperCol="{span: 200}">
											<span slot="label">
												定向逻辑&nbsp;
												<a-tooltip title="What do you want others to call you?">
												<a-icon type="question-circle-o" />
												</a-tooltip>
											</span>
											<a-radio-group default-value="flow_package" @change="onpackage" button-style="solid">
												<a-radio-button value="flow_package">
													定向
												</a-radio-button>
												<a-radio-button value="exclude_flow_package">
													排除
												</a-radio-button>
											</a-radio-group>
										</a-form-item>
										
										<div class="mfont" :class="[packages =='flow_package' ?'isblock':'isnone']" >
											<a-input-search
												style="width:500px;"
												placeholder="请输入媒体包名称或ID"
												enter-button="搜索"
												@search="onpackage"
												/>
											<a-table :row-selection="rowpackage" style="width:500px;" :scroll="{ x: 210, y: 300 }" :pagination="pages" :columns="packagelabel" :data-source="packagelist">
												<a slot="name" slot-scope="text">{{ text }}</a>
											</a-table>
											<p style="color:#2F88FF;cursor:pointer">
												管理自定义人群包<a-icon type="form" />
											</p>
										</div>

										<div :class="[packages =='exclude_flow_package' ?'isblock':'isnone']" class="mfont">
											<a-input-search
												style="width:500px;"
												placeholder="请输入媒体包名称或ID"
												enter-button="搜索"
												size="large"
												@search="onpackage"
												/>
											<a-table :row-selection="rowpackages" style="width:500px;" :scroll="{ x: 210, y: 300 }" :pagination="pages" :columns="packagelabel" :data-source="packagelist">
												<a slot="name" slot-scope="text">{{ text }}</a>
											</a-table>
											<p style="color:#2F88FF;cursor:pointer">
												管理自定义人群包<a-icon type="form" />
											</p>
										</div>
									</div>
								
								<div :class="[landing_type =='AWEME' ?'isblock':'isnone']">
									<a-form-item  :labelCol="{span: 3}" :wrapperCol="{span: 200}">
										<span slot="label">
											过滤高活跃用户&nbsp;
											<a-tooltip title="What do you want others to call you?">
											<a-icon type="question-circle-o" />
											</a-tooltip>
										</span>

										<a-radio-group v-decorator="[
										'filter_aweme_abnormal_active',
													{ rules:[],initialValue: '0'}
													]"
												@change="onsuperior" button-style="solid">
											<a-radio-button value="0">
												不过滤
											</a-radio-button>
											<a-radio-button value="1">
												过滤
											</a-radio-button>
										</a-radio-group>
									</a-form-item>

									<a-form-item  :labelCol="{span: 3}" :wrapperCol="{span: 200}">
										<span slot="label">
											过滤自己粉丝&nbsp;
										</span>

										<a-radio-group v-decorator="[
										'filter_own_aweme_fans',
													{ rules:[],initialValue: '0'}
													]"
												@change="onsuperior" button-style="solid">
											<a-radio-button value="0">
												不过滤
											</a-radio-button>
											<a-radio-button value="1">
												过滤
											</a-radio-button>
										</a-radio-group>
									</a-form-item>

									<a-form-item  :labelCol="{span: 3}" :wrapperCol="{span: 200}">
										<span slot="label">
											过滤高关注数用户&nbsp;
										</span>
										<a-radio-group v-decorator="[
										'filter_aweme_fans_count',
													{ rules:[],initialValue: '0'}
													]"
												@change="onsuperior" button-style="solid">
											<a-radio-button value="0">
												不过滤
											</a-radio-button>
											<a-radio-button value="1000">
												>1000
											</a-radio-button>
											<a-radio-button value="500">
												>500
											</a-radio-button>
											<a-radio-button value="200">
												>200
											</a-radio-button>
										</a-radio-group>
									</a-form-item>
								</div>

								<a-form-item
									:label="$t('平台')"
									:labelCol="{span: 3}"
									:wrapperCol="{span: 200}"
								>
									<div class="label" id="label">
										<a-button @click="onplatform" :type="[platform.length <=0 ?'primary' : '']" >不限</a-button>
										<a-button @click="android" :type="label.android ? 'primary' : ''">android</a-button>
										<a-button @click="iOS" :type="label.iOS ? 'primary' : ''">iOS</a-button>
										<a-button @click="PC" :type="label.PC ? 'primary' : ''">PC</a-button>
									</div>
								</a-form-item>

								<a-form-item
									:label="$t('网络')"
									:labelCol="{span: 3}"
									:wrapperCol="{span: 200}"
									
								>
									<div class="label" id="label">
										<a-button @click="onnetworks" :type="[networks.length <=0 ?'primary' : '']" >不限</a-button>
										<a-button @click="wifi" :type="label.wifi ? 'primary' : ''">WIFI</a-button>
										<a-button @click="twog" :type="label.twog ? 'primary' : ''">2G</a-button>
										<a-button @click="threeg" :type="label.threeg ? 'primary' : ''">3G</a-button>
										<a-button @click="forg" :type="label.forg ? 'primary' : ''">4G</a-button>
									</div>
								</a-form-item>

								<a-form-item  :labelCol="{span: 3}" :wrapperCol="{span: 200}">
									<span slot="label">
										已安装用户&nbsp;
										<a-tooltip title="What do you want others to call you?">
										<a-icon type="question-circle-o" />
										</a-tooltip>
									</span>

									<a-radio-group v-decorator="[
									'hide_if_exists',
												{ rules:[],initialValue: '0'}
												]"
											@change="onsuperior" button-style="solid">
										<a-radio-button value="0">
											不限
										</a-radio-button>
										<a-radio-button disabled value="1">
											过滤
										</a-radio-button>
										<a-radio-button value="2">
											定向
										</a-radio-button>
									</a-radio-group>
								</a-form-item>

								<a-form-item  :labelCol="{span: 3}" :wrapperCol="{span: 200}">
									<span slot="label">
										过滤已转化用户&nbsp;
										<a-tooltip title="What do you want others to call you?">
										<a-icon type="question-circle-o" />
										</a-tooltip>
									</span>
									<a-radio-group v-decorator="[
									'hide_if_converted',
												{ rules:[],initialValue: 'NO_EXCLUDE'}
												]"
											@change="onconverted" button-style="solid">
										<a-radio-button value="NO_EXCLUDE">
											不限
										</a-radio-button>
										<a-radio-button value="AD">
											广告计划
										</a-radio-button>
										<a-radio-button value="CAMPAIGN">
											广告组
										</a-radio-button>
										<a-radio-button value="ADVERTISER">
											广告账户
										</a-radio-button>
										<a-radio-button value="APP">
											APP
										</a-radio-button>
										<a-radio-button value="CUSTOMER">
											公司账户
										</a-radio-button>
									</a-radio-group>
									<p style="margin-left:100px;margin-bottom:0;"><a-icon type="info-circle" />过滤已转化不支持投放目标为展示、点击计划，不支持受众预估</p>
								</a-form-item>

								<div v-if="isconverted">
									<a-form-item  :labelCol="{span: 3}" :wrapperCol="{span: 200}">
									<span slot="label">
										过滤时间&nbsp;
										<a-tooltip title="What do you want others to call you?">
										<a-icon type="question-circle-o" />
										</a-tooltip>
									</span>
									<a-radio-group v-decorator="[
									'activate_type',
												{ rules:[],initialValue: 'NO_EXCLUDE'}
												]"
											button-style="solid">
										<a-radio-button value="NO_EXCLUDE">
											不限
										</a-radio-button>
										<a-radio-button value="ONE_MONTH">
											1个月
										</a-radio-button>
										<a-radio-button value="THREE_MONTH">
											3个月
										</a-radio-button>
										<a-radio-button value="SIX_MONTH">
											6个月
										</a-radio-button>
										<a-radio-button value="TWELVE_MONTH">
											12个月
										</a-radio-button>
									</a-radio-group>
									</a-form-item>
								</div>

							
					<!-- 
								<a-collapse accordion style="background:#fff;border:none;padding:0;">
									<a-collapse-panel key="1" header="显示高级选项" style="border:none;color:Red;"> -->

										<a-form-item  :labelCol="{span: 3}" :wrapperCol="{span: 200}">
											<span slot="label">
												文章分类&nbsp;
												<a-tooltip title="What do you want others to call you?">
												<a-icon type="question-circle-o" />
												</a-tooltip>
											</span>

											<a-radio-group default-value="0" @change="onarticle" button-style="solid">
												<a-radio-button value="0">
													不限
												</a-radio-button>
												<a-radio-button value="1">
													文章分类
												</a-radio-button>
											</a-radio-group>
										</a-form-item>

										<div :class="[article ==1 ?'isblock':'isnone']" class="mfont">
											<a-table :row-selection="rowarticle" style="width:500px;" :scroll="{ x: 210, y: 300 }" :pagination="pages" :columns="articlelabel" :data-source="articlelist">
												<a slot="name" slot-scope="text">{{ text }}</a>
											</a-table>
										</div>

											<a-form-item
												:label="$t('运营商')"
												:labelCol="{span: 3}"
												:wrapperCol="{span: 200}"
												
											>
												<div class="label" id="label">
													<a-button @click="onoperator" :type="[operator !=undefined && operator.length <=0 ?'primary' : '']" >不限</a-button>
													<a-button @click="MOBILE" :type="label.MOBILE ? 'primary' : ''">移动</a-button>
													<a-button @click="UNICOM" :type="label.UNICOM ? 'primary' : ''">联通</a-button>
													<a-button @click="TELCOM" :type="label.TELCOM ? 'primary' : ''">电信</a-button>
												</div>
											</a-form-item>

										<a-form-item  :labelCol="{span: 3}" :wrapperCol="{span: 200}">
											<span slot="label">
												新用户&nbsp;
												<a-tooltip title="What do you want others to call you?">
												<a-icon type="question-circle-o" />
												</a-tooltip>
											</span>
												<div class="label" id="label">
													<a-button @click="onmonthlist" :type="[monthlist !=undefined && monthlist.length <=0 ?'primary' : '']" >不限</a-button>
													<a-button @click="WITH_IN_A_MONTH" :type="label.WITH_IN_A_MONTH ? 'primary' : ''">一个月以内</a-button>
													<a-button @click="ONE_MONTH_2_THREE_MONTH" :type="label.ONE_MONTH_2_THREE_MONTH ? 'primary' : ''">一个月到三个月</a-button>
													<a-button @click="THREE_MONTH_EAILIER" :type="label.THREE_MONTH_EAILIER ? 'primary' : ''">三个月或更早</a-button>
												</div>
										</a-form-item>

										<a-form-item  :labelCol="{span: 3}" :wrapperCol="{span: 200}">
											<span slot="label">
												手机品牌&nbsp;
												<a-tooltip title="What do you want others to call you?">
												<a-icon type="question-circle-o" />
												</a-tooltip>
											</span>
											<a-radio-group default-value="0" @change="onbrand" button-style="solid">
												<a-radio-button value="0">
													不限
												</a-radio-button>
												<a-radio-button value="1">
													按品牌
												</a-radio-button>
											</a-radio-group>
										</a-form-item>

										<div :class="[brand ==1 ?'isblock':'isnone']" class="mfont">
											<a-table :row-selection="rowbrand" style="width:500px;" :scroll="{ x: 210, y: 300 }" :pagination="pages" :columns="brandlabel" :data-source="brandlist">
												<a slot="name" slot-scope="text">{{ text }}</a>
											</a-table>
										</div>

										<a-form-item  :labelCol="{span: 3}" :wrapperCol="{span: 200}">
											<span slot="label">
												手机价格&nbsp;
												<a-tooltip title="What do you want others to call you?">
												<a-icon type="question-circle-o" />
												</a-tooltip>
											</span>
											<a-radio-group default-value="0" @change="onprice" button-style="solid">
												<a-radio-button value="0">
													不限
												</a-radio-button>
												<a-radio-button value="1">
													自定义
												</a-radio-button>
											</a-radio-group>
										</a-form-item>
										
										<div :class="[launchprice ==1 ?'isblock':'isnone']">
											<a-slider :marks="marks" max="11000" range="true"  @afterChange="onAfterChange" :default-value="pricearr" :tipFormatter="null" :step="500" />

											<p class="pfont">快捷方式:
												<span @click="onlaunch(1)" style="margin-left:20px;" class="spanfont">2000元-4000元</span>
												<span @click="onlaunch(2)" style="margin-left:20px;" class="spanfont">4000元-6000元</span>
												<span @click="onlaunch(3)" style="margin-left:20px;" class="spanfont">6000元-8000元</span>
												<span @click="onlaunch(4)" style="margin-left:20px;" class="spanfont">8000元以上</span>
											</p>

										</div>

										<div :class="[brand ==1 ?'isblock':'isnone']" class="mfont">
											<a-table :row-selection="rowbrand" style="width:500px;" :scroll="{ x: 210, y: 300 }" :pagination="pages" :columns="brandlabel" :data-source="brandlist">
												<a slot="name" slot-scope="text">{{ text }}</a>
											</a-table>
										</div>

										<a-form-item  :labelCol="{span: 3}" :wrapperCol="{span: 200}">
											<span slot="label">
												智能放量&nbsp;
												<a-tooltip title="What do you want others to call you?">
												<a-icon type="question-circle-o" />
												</a-tooltip>
											</span>
											<a-radio-group v-decorator="[
									'auto_extend_enabled',
												{ rules:[],initialValue: '0'}
												]"
											@change="onextend" button-style="solid">
												<a-radio-button value="0">
													不启用
												</a-radio-button>
												<a-radio-button value="1">
													启用
												</a-radio-button>
											</a-radio-group>
											<p style="margin-left:100px;margin-bottom:0;"><a-icon type="info-circle" />自能放量不支持受众预估</p>
										</a-form-item>

										<div :class="[enableds ==1 ?'isblock':'isnone']" class="mfont">
											<a-table :row-selection="rowenabled" style="width:500px;" :scroll="{ x: 210, y: 300 }" :pagination="pages" :columns="enabledlabel" :data-source="enabledlist">
												<a slot="name" slot-scope="text">{{ text }}</a>
											</a-table>
										</div>

										<!-- <a-form-item :labelCol="{span: 3}" :wrapperCol="{span: 200}">
											<span slot="label">
												保存为模板
											</span>
											<a-radio-group v-decorator="[
										'istemp',
												{ rules:[],initialValue: '0'}
												]"
												 button-style="solid">
												<a-radio value="0" :checked="true">
													否
												</a-radio>
												<a-radio value="1">
													是
												</a-radio>
											</a-radio-group>
										</a-form-item> -->
									<!-- </a-collapse-panel>
								</a-collapse> -->

								<!-- <a-button size="large">
									保存为定向包 
								</a-button>
								<a-tooltip title="将以上定向设置保存为定向包，该定向包可直接在其他广告计划中复用">
								<a-icon type="question-circle-o" style="margin-left:10px;" />
								</a-tooltip> -->
							<!-- </a-tab-pane> -->
							
							<!-- <a-tab-pane key="2" tab="选择已有定向" force-render>
								<a-input-search
									style="width:500px;"
									placeholder="选择已有定向包名称"
									enter-button="搜索"
									disabled
									size="large"
									@search="ondmp"
									/>
									<span class="spanfont" style="margin-left:10px;">管理自定义定向包<a-icon type="form" /></span>
								<a-table :row-selection="rowSelection" style="width:500px;" :columns="directional" :data-source="directionallist">
									<a slot="name" slot-scope="text">{{ text }}</a>
								</a-table>
								
								<p><a-icon type="info-circle" />过滤已转化不支持投放目标为展示、点击计划</p>
							</a-tab-pane> -->
						<!-- </a-tabs> -->
						<!-- 定向信息 -->
							<div class="ad-audience-estimate-wrapper">
								<div class="ad-audience-estimate-cover" style="background:#fff;">
									<div class="fw-500">预估用户覆盖数
										<a-tooltip title="根据头条、抖音、西瓜、抖音火山版、穿山甲、穿山甲-精选休闲游戏等广告位展示量计算得出，大于1万时，默认展示最小值">
										<a-icon type="question-circle-o" style="margin-left:10px;" />
										</a-tooltip>
									</div>
									<div class="indicator-wrap">
										<div class="ad-audience-estimate-cover-text">
											今日头条
											<span class="other-covernum bui-num">{{tonum(estimate.toutiao.num)}}</span>
										</div>
										<div class="ad-audience-estimate-cover-text">
											抖音短视频
											<span class="other-covernum bui-num">{{tonum(estimate.aweme.num)}}</span>
										</div>
										<div class="ad-audience-estimate-cover-text">
											西瓜视频
											<span class="other-covernum bui-num">{{tonum(estimate.video_app.num)}}</span>
										</div>
										<div class="ad-audience-estimate-cover-text">
											抖音火山版
											<span class="other-covernum bui-num">{{tonum(estimate.hotsoon.num)}}</span>
										</div>
									</div>

									<a-spin size="small" tip="Loading..." :spinning="audienceloading" />

									<div class="ad-audience-estimate-info">
										<p class="ad-audience-estimate-info-name">受众信息</p>

										<div class="audience-info" v-if="citylist.length >0">
											<span class="category-label">城市：</span>
											<span class="category-item" v-for="(item,index) in citylist" :key="index">
												{{item.name}}、
											</span>
										</div>
										<div class="audience-info" v-if="countylist.length >0">
											<span class="category-label">地域：</span>
											<span class="category-item" v-for="(item,index) in countylist" :key="index">
												{{item.name}}、
											</span>
										</div>
										<div class="audience-info" :class="[gender != 'NONE' ? 'isblock':'isnone']">
											<span class="category-label">性别：</span>
											<span class="category-item" v-if="gender =='GENDER_MALE'">男</span>
											<span class="category-item" v-if="gender =='GENDER_FEMALE'">女</span>
										</div>
										<div class="audience-info" :class="[agearr.length <=0 ?'isnone' : 'isblock']">
											<span class="category-label">年龄：</span>
											<span class="category-item" v-if="label.label1">18-23、</span>
											<span class="category-item" v-if="label.label2">24-30、</span>
											<span class="category-item" v-if="label.label3">31-40、</span>
											<span class="category-item" v-if="label.label4">41-49、</span>
											<span class="category-item" v-if="label.label5">50+</span>
										</div>
										<div class="audience-info" :class="[selectedRows.length <=0 ?'isnone' : 'isblock']">
											<span class="category-label">定向人群包：</span>
											<span class="category-item" v-for="item in selectedRows" :key="item.custom_audience_id">
												{{item.name}}、
											</span>
										</div>
										<div class="audience-info" :class="[selectedRowss.length <=0 ?'isnone' : 'isblock']">
											<span class="category-label">排除人群包：</span>
											<span class="category-item" v-for="item in selectedRowss" :key="item.custom_audience_id">
												{{item.name}}、
											</span>
										</div>

										<div class="audience-info" :class="[catewords.length <=0 ?'isnone' : 'isblock']">
											<span class="category-label">行为类目词</span>
											<span class="category-item" v-for="item in catewords" :key="item.id">
												{{item.name}}、
											</span>
										</div>

										<div class="audience-info" :class="[datakeyword.length <=0 ?'isnone' : 'isblock']">
											<span class="category-label">行为关键词</span>
											<span class="category-item" v-for="item in datakeyword" :key="item.id">
												{{item.name}}、
											</span>
										</div>

										<div class="audience-info" :class="[catewordslist.length <=0 ?'isnone' : 'isblock']">
											<span class="category-label">兴趣类目词</span>
											<span class="category-item" v-for="item in catewordslist" :key="item.id">
												{{item.name}}、
											</span>
										</div>

										<div class="audience-info" :class="[datakey.length <=0 ?'isnone' : 'isblock']">
											<span class="category-label">兴趣关键词</span>
											<span class="category-item" v-for="item in datakey" :key="item.id">
												{{item.name}}、
											</span>
										</div>

										<div class="audience-info" :class="[platform.length <=0 ?'isnone' : 'isblock']">
											<span class="category-label">平台：</span>
											<span class="category-item" v-if="label.android">android、</span>
											<span class="category-item" v-if="label.iOS">iOS、</span>
											<span class="category-item" v-if="label.PC">PC、</span>
										</div>
										<div class="audience-info" :class="[networks.length <=0 ?'isnone' : 'isblock']">
											<span class="category-label">网络：</span>
											<span class="category-item" v-if="label.wifi">WIFI、</span>
											<span class="category-item" v-if="label.twog">2G、</span>
											<span class="category-item" v-if="label.threeg">3g、</span>
											<span class="category-item" v-if="label.forg">4G、</span>
										</div>

										<div class="audience-info" :class="[rowarticlelist.length <=0 ?'isnone' : 'isblock']">
											<span class="category-label">文章分类：</span>
											<span class="category-item" v-for="item in rowarticlelist" :key="item.key">
												{{item.name}}、
											</span>
										</div>
										<div class="audience-info" :class="[operator.length <=0 ?'isnone' : 'isblock']">
											<span class="category-label">运行商：</span>
											<span class="category-item" v-if="label.MOBILE">移动、</span>
											<span class="category-item" v-if="label.UNICOM">联通、</span>
											<span class="category-item" v-if="label.TELCOM">电信、</span>
										</div>

										<div class="audience-info" :class="[monthlist.length <=0 ?'isnone' : 'isblock']">
											<span class="category-label">新用户：</span>
											<span class="category-item" v-if="label.WITH_IN_A_MONTH">一个月以内、</span>
											<span class="category-item" v-if="label.ONE_MONTH_2_THREE_MONTH">一个月到三个月、</span>
											<span class="category-item" v-if="label.THREE_MONTH_EAILIER">三个月或更早、</span>
										</div>

										<div class="audience-info" :class="[rowbrandlist.length <=0 ?'isnone' : 'isblock']">
											<span class="category-label">手机品牌：</span>
											<span class="category-item" v-for="item in rowbrandlist" :key="item.key">
												{{item.name}}、
											</span>
										</div>

										<div class="audience-info" :class="[strnum !='' ?'isblock' : 'isnone']">
											<span class="category-label">手机价格：</span>
										<span class="category-item">{{strnum[0]}}以上</span>
										</div>

										<div class="audience-info" :class="[rowenabledlist.length <=0 ?'isnone' : 'isblock']">
											<span class="category-label">可放开定向：</span>
											<span class="category-item" v-for="item in rowenabledlist" :key="item.key">
												{{item.name}}、
											</span>
										</div>

										<div class="audience-info">
											<span class="category-label">过滤已转化用户：</span>
											<span class="category-item" v-if="converted == 'AD'">广告计划</span>
											<span class="category-item" v-else-if="converted == 'CAMPAIGN'">广告组</span>
											<span class="category-item" v-else-if="converted == 'ADVERTISER'">广告账户</span>
											<span class="category-item" v-else-if="converted == 'APP'">APP</span>
											<span class="category-item" v-else-if="converted == 'CUSTOMER'">公司账户</span>
											<span class="category-item" v-else>不限</span>
										</div>
										<div class="audience-info">
											<span class="category-label">智能放量：</span>
											<span style="color:#999" v-if="rowenabledlist.length <=0">不限</span>
											<span class="category-item" v-else v-for="i in rowenabledlist" :key="i">
												<a style="color:#999;">{{i.name}}、</a>
											</span>
										</div>
									</div>
								</div>
							</div>
							</a-form>
						</div>
					</a-modal>

            <a-list :grid="{ gutter: 16, column: 5 }" :loading="tableloading" :pagination="paginationOpt" style="margin-top:20px;" :data-source="dataSource.list">
                <a-list-item slot="renderItem" slot-scope="item,index">
                    <a-card :bodyStyle="{padding:0}" style="border:1px solid #ddd;" :headStyle="{padding:0}">
                        <span slot="title" href="#" style="padding-left:10px;">
                            <a style="color:#333;">{{item.name}}</a><a-icon @click="oneditname(item.id)" style="margin-left:5px;" title="修改名称" type="form" />
                            <a style="float:right;margin-right:10px;">
                                <a-space>
                                    <a-icon @click="copydis(index)" title="复制" type="copy" />
                                    <a-icon @click="editdis(index)" title="编辑" type="form" />
                                    <a-checkbox-group  @change="onaudience">
                                        <a-checkbox></a-checkbox>
                                    </a-checkbox-group>
                                 </a-space>
                            </a>
                        </span>
						<!-- 修改定向包名 -->
                        <a-modal
                            title="修改定向包名称"
                            :visible="modaldirec"
                            :confirm-loading="confirmLoading"
                            @ok="direcOk(index)"
                            @cancel="direcCancel"
                        >
                            <a-form layout="horizontal" :form="form4" @submit="handleSubmit">
                                <a-form-item
                                :labelCol="{span: 2}"
                                :wrapperCol="{span: 18, offset: 1}"
                                >
                                    <a-input v-decorator="[
                                    'name',
                                    { rules: [{ required: true, message: '请输入定向包名称' }],initialValue:direc.name}
                                    ]" />
                                </a-form-item>
                            </a-form>
                        </a-modal>

						<!-- 复制 -->
						<a-modal
							title="复制定向包"
							:visible="copyvis"
							:confirm-loading="confirmLoading"
							@ok="copyOk"
							@cancel="copyCancel"
							>
							<a-input v-decorator="['copyname',{ rules:[],initialValue: copynames}]" @change="oncopyname" :defaultValue="copynames" placeholder="请输入定向包名称" />
						</a-modal>
                    
                        <div>
                            <ul class="ulContainer">
                                <li style="list-style: none;">地域：
                                    <span style="color:#999" v-if="item.audience.district =='NONE'">不限</span>
                                    <span class="category-item" v-else v-for="i in treeData" :key="i.id">
                                        {{i.name}}、
                                    </span>
                                </li>
                               <li style="list-style: none;">性别：
                                    <span style="color:#999" v-if="item.audience.gender =='NONE'">不限</span>
                                    <span class="category-item" v-if="item.audience.gender =='GENDER_MALE'">男</span>
                                    <span class="category-item" v-if="item.audience.gender =='GENDER_FEMALE'">女</span>
                                </li>
                                <li style="list-style: none;">年龄：
                                    <span style="color:#999" v-if="item.audience.age.length <=0">不限</span>
                                    <span class="category-item" v-else v-for="i in item.audience.age" :key="i">
                                        <a style="color:#999;" v-if="i =='AGE_BETWEEN_18_23'">18-23、</a>
                                        <a style="color:#999;" v-if="i =='AGE_BETWEEN_24_30'">24-30、</a>
                                        <a style="color:#999;" v-if="i =='AGE_BETWEEN_31_40'">31-40、</a>
                                        <a style="color:#999;" v-if="i =='AGE_BETWEEN_41_49'">41-49、</a>
                                        <a style="color:#999;" v-if="i =='AGE_ABOVE_50'">50+、</a>
                                    </span>
                                </li>
                                <li style="list-style: none;">行为兴趣选择：
                                    <span style="color:#999" v-if="item.audience.interest_action_mode !='NONE'">自定义</span>
                                    <span style="color:#999" v-else>不限</span>
                                </li>
                                <li style="list-style: none;">行为场景：
                                    <span style="color:#999" v-if="item.audience.action_scene =='E-COMMERCE'">电商互动行为</span>
                                    <span style="color:#999" v-else-if="item.audience.action_scene =='NEWS'">资讯互动行为</span>
                                    <span style="color:#999" v-else-if="item.audience.action_scene =='APP'">APP推广互动行为</span>
                                    <span style="color:#999" v-else>不限</span>
                                </li>
                                <li style="list-style: none;">行为天数：
                                    <span style="color:#999" v-if="item.audience.action_days =='7'">7天</span>
                                    <span style="color:#999" v-else-if="item.audience.action_days =='15'">15天</span>
                                    <span style="color:#999" v-else-if="item.audience.action_days =='30'">30天</span>
                                    <span style="color:#999" v-else-if="item.audience.action_days =='60'">60天</span>
                                    <span style="color:#999" v-else-if="item.audience.action_days =='90'">90天</span>
                                    <span style="color:#999" v-else-if="item.audience.action_days =='180'">180天</span>
                                    <span style="color:#999" v-else-if="item.audience.action_days =='365'">365天</span>
                                </li>
                                <li style="list-style: none;">抖音达人：
                                    <span style="color:#999" v-if="item.audience.aa =='NONE'">不限</span>
                                    <span style="color:#999" v-if="item.audience.aa =='RECOMMEND'">自定义</span>
                                </li>
                                <li style="list-style: none;">精选流量包：<span style="color:#999">不限</span></li>
                                <li style="list-style: none;">平台：
                                    <span style="color:#999" v-if="item.audience.platform.length <=0">不限</span>
                                    <span class="category-item" v-else v-for="i in item.audience.platform" :key="i">
                                        <a style="color:#999;" v-if="i =='ANDROID'">android、</a>
                                        <a style="color:#999;" v-if="i =='IOS'">iOS、</a>
                                        <a style="color:#999;" v-if="i =='PC'">PC、</a>
                                    </span>
                                </li>
                                <li style="list-style: none;">文章分类：
                                    <span style="color:#999" v-if="item.audience.article_category.length <=0">不限</span>
                                    <span class="category-item" v-else v-for="i in item.audience.article_category" :key="i">
                                        <a style="color:#999;">{{i.name}}、</a>
                                    </span>
                                </li>
                                <li style="list-style: none;">网络：
                                    <span style="color:#999" v-if="item.audience.ac.length <=0">不限</span>
                                    <span class="category-item" v-else v-for="i in item.audience.ac" :key="i">
                                        <a style="color:#999;" v-if="i =='WIFI'">WIFI</a>
                                        <a style="color:#999;" v-if="i =='2G'">2G</a>
                                        <a style="color:#999;" v-if="i =='3G'">3G</a>
                                        <a style="color:#999;" v-if="i =='4G'">4G</a>
                                    </span>
                                </li>
                                <li style="list-style: none;">智能放量：
                                    <span style="color:#999" v-if="item.audience.rowenabledlist.length <=0">不限</span>
                                    <span class="category-item" v-else v-for="i in item.audience.rowenabledlist" :key="i">
                                        <a style="color:#999;">{{i.name}}、</a>
                                    </span>
                                </li>
                                <li style="list-style: none;">运营商：
                                    <span style="color:#999" v-if="item.audience.carrier.length <=0">不限</span>
                                    <span class="category-item" v-else v-for="i in item.audience.carrier" :key="i">
                                        <a style="color:#999;" v-if="i =='MOBILE'">移动、</a>
                                        <a style="color:#999;" v-if="i =='UNICOM'">联通、</a>
                                        <a style="color:#999;" v-if="i =='TELCOM'">电信、</a>
                                    </span>
                                </li>
                                <li style="list-style: none;">新用户：
                                    <span style="color:#999" v-if="item.audience.activate_type.length <=0">不限</span>
                                    <span class="category-item" v-else v-for="i in item.audience.activate_type" :key="i">
                                        <a style="color:#999;" v-if="i =='WITH_IN_A_MONTH'">一个月以内、</a>
                                        <a style="color:#999;" v-if="i =='ONE_MONTH_2_THREE_MONTH'">一个月到三个月、</a>
                                        <a style="color:#999;" v-if="i =='SIX_MTHREE_MONTH_EAILIERONTH'">三个月或更早、</a>
                                    </span>
                                </li>
                                <li style="list-style: none;">手机品牌：
                                    <span style="color:#999" v-if="item.audience.device_brand.length <=0">不限</span>
                                    <span class="category-item" v-else v-for="i in item.audience.device_brand" :key="i">
                                        <a style="color:#999;">{{i.name}}、</a>
                                    </span>
                                </li>
                            </ul>
                            <div class="orient-card-content-desc">
                                <p style="font-size:12px;margin-bottom:0px;">预计人群覆盖: </p>
                                <div style="font-size:12px;">抖音达人：<b>{{tonum(item.estimate.toutiao.num)}}</b>活用户</div>
                                <div style="font-size:12px;">火山视频：<b>{{tonum(item.estimate.aweme.num)}}</b>活用户</div>
                                <div style="font-size:12px;">今日头条：<b>{{tonum(item.estimate.video_app.num)}}</b>活用户</div>
                                <div style="font-size:12px;">西瓜视频：<b>{{tonum(item.estimate.hotsoon.num)}}</b>活用户</div>
                                <p style="text-align:right;margin-bottom:0;font-size:12px;padding-right:10px;">{{item.created_at}}</p>
                            </div>
                        </div>
                    </a-card>
                </a-list-item>
            </a-list>
<!-- 
			 <pagination
				:total="dataSource.page_info.total"
				:page_size="dataSource.page_info.page_size"
				@listNew="listNew"
			></pagination> -->

        </div>
    </div>
</template>
<script src="./plans.js"></script>
<style lang="less" scoped>
    .ulContainer{
        height: 180px;
        padding: 10px;
        border-bottom: 1px solid #ddd;
        overflow: auto;
        font-size: 12px;
        margin-bottom: 0;
    }
    .ulContainer li{
        list-style: none;
        line-height: 26px;
    }
    .orient-card-content-desc{
        min-height: 70px;
        background: #f9f9f9;
        padding: 0 0 5px 10px;
        position: relative;
        line-height: 22px;
    }
    .isblock{
        display: block;
    }
    .isnone{
        display: none;
	}
	.mfont{
		margin-left:100px;
	}

	// 省市
.byted-select-panel-moduler{
	width: 150px;
	display: inline-block;
	-webkit-box-flex: 0;
	border:1px solid #e0e0e0;
	margin-top:10px;
}

.listbox{
	height: 192px;
    padding: 10px;
    overflow-y: auto;
    position: relative;
}

.byted-select-panel-moduler-header{
	border-bottom: 1px solid #e0e0e0;
    background-color: #fafafa;
    color: #333;
    font-size: 14px;
    line-height: 22px;
    padding: 8px 12px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.byted-select-panel-moduler-header-title{
	font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}


    .ad-audience-estimate-wrapper{
        width:237px;
        position: absolute;
        right: 0;
        top:0;
        padding: 10px;
    }
    .ad-audience-estimate-cover{
        background-color: #F8F9FA;
        border-radius: 4px 4px 0 0;
        padding: 10px;
        font-size: 12px;
        color: #333;
        padding: 16px 0 8px 12px;
        border: 1px solid #E4E9ED;
    }
    .ad-audience-estimate-cover-text{
        display: block;
        max-width: 108px;
        min-width: 100px;
        line-height: 20px;
        margin-bottom: 9px;
        color: #999;
	}
	
		.content2{
		width:300px;
		height: 300px;
		// padding: 10px;
		border: 1px solid #e0e0e0;
		overflow-y: scroll;
		display: inline-block;
		display: flex;
		flex-direction: column;
		font-size: 12px;
	}
	.content2 .title{
		flex-flow: column;
		display: flex;
		height: 80px;
		padding: 8px 12px;
		background: #f8f9fa;
		border-bottom: 1px solid #dadfe3;
		border-radius: 4px 4px 0 0;
	}
	.content {
		display: flex;
		width: 100%;
	}
	.text{
		width:200px;
		height: 300px;
		padding: 10px;
		border: 1px solid #e0e0e0;
		overflow-y: scroll;
		display: inline-block;
		display: flex;
		flex-direction: column;
		font-size: 22px;
	}
</style>